$font-default-color:#333;

// @font-face{
//   font-family: 'Roboto-Regular';
//   src : url('../iconfont/Roboto-Regular.ttf');
// }

*{
  //font-family:Roboto-Regular;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

html,body,#app{
    width: 100%;
    height: 100%;
    min-height:100%;
}

html{
  overflow-y: auto !important;
}

body{
    font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
    margin:0;
    padding:0;
    font-size:12px;
    color:$font-default-color;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
    background-color: #f7f7f7;
}

#app{
    // max-width:750px;
    margin:auto;
}

h1,h2,h3,h4,h5,h6,dl,dt,dd,p,ul{
    margin:0;
}

li{
    list-style: none;
}

dl,dt,dd,ul,button{
    padding:0;
}

a{
    color:$font-default-color;
    text-decoration: none;
}

input:-webkit-autofill { 
    box-shadow: 0 0 0px 1000px white inset !important;
}

.clearfix {
    &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
}

@mixin flex-num($count){
    -webkit-box-flex: $count;
    -moz-box-flex:  $count;
    -webkit-flex:  $count;
    -moz-flex:  $count; 
    -ms-flex:  $count; 
    flex: $count;
  }
  
  .flex{
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    .flex-half{
      @include flex-num(0.5);
    }
    .flex-1{
      @include flex-num(1);
    }
  }
  
  .align-items{
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .align-self{
    -webkit-align-self: center;
    align-self: center;
  }

  .flex-direction {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    }
  
  .flex-wrap{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .justify-between{
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    -ms-justify-content:space-between;
    -o-justify-content:space-between;
    justify-content:space-between;
  }

  .justify-around{
    -webkit-justify-content:space-around;
    -moz-justify-content:space-around;
    -ms-justify-content:space-around;
    -o-justify-content:space-around;
    justify-content:space-around;
  }

  .justify-center{
    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
    -o-justify-content:center;
    justify-content:center;
  }

  .text-center{
    text-align: center;
  }
  
  .text-right{
    text-align: right;
  }
  
  .text-left{
    text-align: left;
  }
  
  .lf{
    float:left;
  }
  
  .rt{
    float:right;
  }
  
  .maxImg{
    max-width:100%;
  }
  
  .nowrap{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .block{display: block;}
  .max-width{width: 100%;}
  .position-relative{position: relative;}
  .position-absolute{position: absolute;}
  .position-sticky{position: sticky;}
  .mtb-20{margin: 20px 0;}
  .mt-10{margin-top: 10px;}
  .mt-20{margin-top: 20px;}
  .mt-30{margin-top: 30px;}
  .mt-40{margin-top: 40px;}
  .mt-50{margin-top: 50px;}
  .mt-60{margin-top: 60px;}
  .ml-20{margin-left: 20px;}
  .p-12{padding: 12px;}
  .pt-20{padding-top: 20px;}
  .pt-30{padding-top: 30px;}
  .pl-20{padding-left: 20px;}

  .default-card{
    border-radius: 10px !important;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1) !important;
  }